<template>
  <div>
    <div class="nb-container">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="banner in banners" :key="banner.id">
            <img :src="banner.imageUrl" :alt="banner.title">
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
      </div>
    </div>
    <div>abc</div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  data () {
    return {
      banners: []
    }
  },
  created () {
    this.$ajax
      .getHome()
      .then(resp => {
        if (resp.data.code === 200) {
          this.banners = resp.data.data.banners
          this.$nextTick().then(() => {
            this.initSwiper()
          })
        } else {
          // 处理错误
        }
      })
      .catch(error => {
        console.log(error)
        // 处理错误
      })
  },
  methods: {
    initSwiper () {
      this.mySwiper = new Swiper('.swiper-container', {
        autoplay: true,
        loop: true,
        pagination: {
          el: '.swiper-pagination'
        },
        scrollbar: {
          el: '.swiper-scrollbar'
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import "swiper/dist/css/swiper.min.css";
.nb-container {
  width: 100%;
  height: 0;
  padding-top: percentage(400 / 1080);
  position: relative;
}
.swiper-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.swiper-container img {
  max-width: 100%;
}
</style>
